﻿<template>
  <div class="homerecommend">
    <swiper>
      <swiper-slide>
        <router-link tag="div" class="recommend" v-for="item of list" :key="item.id" :to="'/detail/'+item.id" >
          <h3>爆款推荐</h3>
          <div class="reco-img">
            <img class="reco-img-content" :src="item.imgUrl">
          </div>
          <p class="reco-desc">{{item.title}}</p>
          <p class="reco-price">￥88元/人<span>12345人去过</span></p>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props:{
    list:Array
  },
  data() {
      return {
        // recommendList: [
        //   {
        //     id: "01",
        //     imgUrl: require("@/assets/images/recommend1.jpg"),
        //     title: "[爆款推荐] 北京故宫白日梦3日游"
        //   }, {
        //     id: "02",
        //     imgUrl: require("@/assets/images/recommend2.jpg"),
        //     title: "[爆款推荐] 北京故宫白日梦3日游"
        //   }, {
        //     id: "03",
        //     imgUrl: require("@/assets/images/recommend3.jpg"),
        //     title: "[爆款推荐] 北京故宫白日梦3日游"
        //   },
        // ],
        swiperOption: {
          pagination: ".swiper-pagination",
          autoplay: false
        }
      };
    },
}
</script>

<style lang="stylus" scoped>
.homerecommend
  margin-top .2rem
  background #ffffff
  border-radius .2rem
  margin-top .2rem
  background #ffffff
  border-radius .2rem
.recommend
  width 100%
  margin .05rem 0
  border 1px solid rgba(235,235,235,0.5)
  border-radius .2rem
  margin-top .4rem
.recommend
  width 100%
  margin .05rem 0
  border 1px solid rgba(235,235,235,0.5)
  border-radius .2rem
  border-radius .5rem
  padding-left .2rem
 h3
  padding-top .2rem
  font-weight bold
  padding-left  .2rem
 .reco-img
  padding-top .2rem
 .reco-img img 
  width 100% 
  margin-left -.2rem
  // border-radius .5rem 
.reco-desc
  padding-top .2rem
  padding-left  .1rem
.reco-price 
  padding .2rem 0
  padding-left  .1rem
  color  red
  font-weight bold
.reco-price  span 
  float right
  padding-right .6rem
  color #000
  font-weight normal
</style>